<template>
  <div>
    <div class="back" @touchend="backTouch"></div>
    <div class="upload" @touchend="saveTouch"></div>
    <div class="community" @touchend="communityTouch"></div>
    <div class="insert" v-if="insertIsShow" @touchend="insertTouch"></div>
    <Save v-if="saveIsShow" @saveTouch="saveTouch" @reload="reload" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
import Save from "./save.vue"
export default {
  components: {
    Save
  },
  data() {
    return {
      saveIsShow: false
    }
  },
  computed: {
    insertIsShow() {
      return this.produce.content.length === this.current + 1
    },
    ...mapGetters("produceStatus", {
      produce: "getProduce",
      current: "getProduceCurrent"
    })
  },
  methods: {
    //返回
    backTouch: function () {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.go(-1)
        }
      })
    },
    //社区
    communityTouch: function () {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/community" })
        }
      })
    },
    //保存
    saveTouch: function () {
      this.touchMusic()
      this.saveIsShow = !this.saveIsShow
    },
    //新增页
    insertTouch: function () {
      this.touchMusic()
      this.insertProduce()
      this.reload()
    },
    reload: function () {
      this.$emit("reload")
    },
    ...mapActions("mainStatus", ["setLoading"]),
    ...mapActions("produceStatus", ["insertProduce"])
  }
}
</script>

<style lang="stylus" scoped>
.back
  background url($urlTitle + 'icon/icon-返回.png') 0 0 / 100% 100%
  $coord('WHLT', 13vh, 12.9vh, 1rem, 1rem)
  transform translate(calc(0px - var(--X)), calc(0px - var(--Y)))
  z-index 100
.upload
  background url($urlTitle + 'icon/icon-上传.png') 0 0 / 100% 100%
  $coord('WHRT', 13vh, 12.9vh, 1rem, 1rem)
  transform translate(var(--X), calc(0px - var(--Y)))
  z-index 100
.community
  background url($urlTitle + 'icon/icon-社区.png') 0 0 / 100% 100%
  margin-right 17vh
  $coord('WHRT', 13vh, 12.9vh, 1rem, 1rem)
  transform translate(var(--X), calc(0px - var(--Y)))
  z-index 100
.insert
  background url($urlTitle + 'icon/icon-添加背景.png') 0 0 / 100% 100%
  $coord('WHRB', 15vh, 15vh, 6vh, 4.5vh)
  transform translate(var(--X), var(--Y))
  z-index 100
</style>